<template>
	<prevent-view :stop="props.stop">
		<view class="e-cell" :class="[customClass]" :style="[addStyle(props.customStyle)]"
			:hover-class="!props.disabled && (props.clickable || props.isLink) ? 'e-cell--clickable' : ''"
			:hover-stay-time="250" @tap="clickHandler">
			<view class="e-cell__body" :class="[
		    props.center && 'e-cell--center',
		    props.size === 'large' && 'e-cell__body--large',
		  ]">
				<view class="e-cell__body__content">
					<view class="e-cell__left-icon-wrap" v-if="$slots.icon || props.icon">
						<slot name="icon" v-if="$slots.icon"> </slot>
						<e-icon v-else :name="props.icon" :custom-style="props.iconStyle"
							:size="props.size === 'large' ? 22 : 18"></e-icon>
					</view>
					<view class="e-cell__title">
						<slot name="title">
							<text v-if="props.title" class="e-cell__title-text" :style="[titleTextStyle]" :class="[
		            props.disabled && 'e-cell--disabled',
		            props.size === 'large' && 'e-cell__title-text--large',
		          ]">{{ title }}</text>
						</slot>
						<slot name="label">
							<text class="e-cell__label" v-if="props.label" :class="[
		            props.disabled && 'e-cell--disabled',
		            props.size === 'large' && 'e-cell__label--large',
		          ]">{{ label }}</text>
						</slot>
					</view>
				</view>
				<slot name="value">
					<text class="e-cell__value" :class="[
		        props.disabled && 'e-cell--disabled',
		        props.size === 'large' && 'e-cell__value--large',
		      ]" v-if="!empty(props.value)">{{ props.value }}</text>
				</slot>
				<view class="e-cell__right-icon-wrap" v-if="$slots['right-icon'] || props.isLink"
					:class="[`e-cell__right-icon-wrap--${props.arrowDirection}`]">
					<slot name="right-icon" v-if="$slots['right-icon']"> </slot>
					<e-icon v-else :name="props.rightIcon" :custom-style="props.rightIconStyle"
						:color="props.disabled ? '#c8c9cc' : 'info'" :size="props.size === 'large' ? 18 : 16"></e-icon>
				</view>
			</view>
			<e-line v-if="props.border"></e-line>
		</view>
	</prevent-view>
	
	
</template>

<script lang='ts'>
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * cell  单元格
	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
	 * @tutorial https://uviewui.com/components/cell.html
	 * @property {String | Number}	title			标题
	 * @property {String | Number}	label			标题下方的描述信息
	 * @property {String | Number}	value			右侧的内容
	 * @property {String}			icon			左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
	 * @property {Boolean}			disabled		是否禁用cell	
	 * @property {Boolean}			border			是否显示下边框 (默认 true )
	 * @property {Boolean}			center			内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
	 * @property {String}			url				点击后跳转的URL地址
	 * @property {String}			linkType		链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 (默认 'navigateTo' )
	 * @property {Boolean}			clickable		是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ） 
	 * @property {Boolean}			isLink			是否展示右侧箭头并开启点击反馈 （默认 false ）
	 * @property {Boolean}			required		是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) （默认 false ）
	 * @property {String}			rightIcon		右侧的图标箭头 （默认 'arrow-right'）
	 * @property {String}			arrowDirection	右侧箭头的方向，可选值为：left，up，down
	 * @property {Object | String}			rightIconStyle	右侧箭头图标的样式
	 * @property {Object | String}			titleStyle		标题的样式
	 * @property {Object | String}			iconStyle		左侧图标样式
	 * @property {String}			size			单位元的大小，可选值为 large，normal，mini 
	 * @property {Boolean}			stop			点击cell是否阻止事件传播 (默认 true )
	 * @property {Object}			customStyle		定义需要用到的外部样式
	 * 
	 * @event {Function}			click			点击cell列表时触发
	 * @example 该组件需要搭配cell-group组件使用，见官方文档示例
	 */
	export default defineComponent({
		name: "e-cell",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from "vue";
	import {
		cellProps,
		cellEmits
	} from "./props";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		empty
	} from '../../libs/utils'
	import {
		addStyle,
		openPage
	} from "../../libs/utils/_utils";
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	import preventView from '../prevent-view/index.vue'

	const {
		cell: cellDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(cellProps)

	const props = useDefaultProps<DefaultProps['cell']>(_props, cellDefaultProps);

	const emit = defineEmits(cellEmits);

	const titleTextStyle = computed(() => addStyle(props.value.titleStyle as string));

	// 点击cell
	const clickHandler = (e : any) => {
		if (props.value.disabled) return;
		emit("click", {
			name: props.value.name,
		});
		// 如果配置了url(此props参数通过mixin引入)参数，跳转页面
		openPage(props.value.url, props.value.linkType);
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/cell.scss";
</style>